<template>
  <el-dialog title="住户账单信息详情" :visible.sync="dialogVisible">
    <el-card shadow="hover" header="支付账单信息">
      <el-form label-width="120px" :model="payOrderInfo">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="账单编号：">
              <el-input :value="payOrderInfo.id" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账单说明：">
              <el-input :value="payOrderInfo.orderName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="支付方式：">
              <el-input :value="getpayTypeDictsValue(payOrderInfo.orderPayType)" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付时间：">
              <el-input :value="payOrderInfo.orderTime" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="收款人：">
              <el-input :value="payOrderInfo.operaPerson" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款总金额：">
              <el-input :value="payOrderInfo.orderPayAmount">
                <span slot="suffix">
                  ￥
                </span>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-divider />
    <el-card shadow="hover" header="住户项目费用对账信息">
      <div>
        <el-table
          v-loading="loading"
          :data="payinfoReconciliationDataSource"
          :border="true"
          align="center"
          empty-text="暂无数据"
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            width="55"
            fixed="left"
            align="center"
          />
          <el-table-column
            type="index"
            :index="indexMethod"
            label="#"
            width="50"
            fixed="left"
            align="center"
          />
          <el-table-column
            label="费用项目名称"
            align="center"
            min-width="100"
            fixed="left"
            prop="expenseName"
          />
          <el-table-column
            label="减免金额"
            min-width="120"
            header-align="center"
            align="right"
          >
            <template slot-scope="{row}">
              {{ row.payReduction }} ￥
            </template>
          </el-table-column>
          <el-table-column
            label="应收金额"
            header-align="center"
            align="right"
            min-width="120"
          >
            <template slot-scope="{row}">
              {{ row.amountReceivable }} ￥
            </template>
          </el-table-column>
          <el-table-column
            label="滞纳金"
            header-align="center"
            align="right"
            min-width="120"
          >
            <template slot-scope="{row}">
              <span v-if="!row.lateFee">{{ row.lateFee }} ￥</span>

            </template>
          </el-table-column>
          <el-table-column
            label="实收金额"
            header-align="center"
            align="right"
            min-width="120"
          >
            <template slot-scope="{row}">
              {{ row.paidInAmount }} ￥
            </template>
          </el-table-column>
          <el-table-column
            label="缴费状态"
            align="center"
          >
            <template slot-scope="{row}">
              {{ getpayStatusDictsValue(row.payStatus) }}
            </template>
          </el-table-column>
          <el-table-column
            label="支付时间"
            align="center"
            width="200"
            prop="payTime"
          />
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            min-width="200"
          >
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.payStatus === '1' && payOrderInfoDataSource.valiFlag === '1' && scope.row.reconciliationFlag === '2'"
                size="mini"
                style="width: 100px"
                type="danger"
                @click="handleCheck(scope.$index, scope.row)"
              >
                对账
              </el-button>
              <el-button
                v-else-if="scope.row.payStatus === '0'"
                size="mini"
                style="width: 120px"
                type="danger"
              >
                未支付不可对账
              </el-button>
              <el-button
                v-else-if="payOrderInfoDataSource.valiFlag === '0'"
                size="mini"
                style="width: 100px"
                type="danger"
              >
                作废不可对账
              </el-button>
              <el-button
                v-else
                size="mini"
                style="width: 100px"
                type="success"
              >
                已对账
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div align="center">
          <div style="display: inline-block;width: 60px;height:60px;line-height: 60px;text-align: center;font-size: 15px">
            <span style="text-align: center;line-height: 60px;width: 60px;height:60px;">共{{ dataTotals }}条</span>
          </div>
          <div style="display: inline-block">
            <el-pagination
              :current-page.sync="queryParma.pageIndex"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="queryParma.pageSize"
              layout="total, sizes, prev,next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </el-card>
  </el-dialog>
</template>

<script>
const { getAllPayInfoPage, modifyOneOrBatchPayInfo } = require('@/api/ht/zffygl/zfxxgl')
const { getDictsList } = require('@/api/dicts')
const { Message } = require('element-ui')
export default {
  name: 'Modal',
  props: {
    payOrderInfo: {
      type: Object,
      default: () => {
        return {
          id: '',
          householdCode: '',
          orderName: '',
          orderPayType: '',
          orderPayAmount: '',
          orderTime: '',
          operaPerson: '',
          hasAllReconciliationFlag: '',
          householdName: '',
          householdType: '',
          previousStatus: '',
          cotyCode: '',
          buildingNumber: '',
          houseNumber: '',
          payType: '',
          villageName: '',
          heatArea: '',
          valiFlag: ''
        }
      }
    },
    payTypeList: {
      type: Array,
      default: () => []
    },
    payinfoStatusList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false, // 对话框是否显示
      loading: false, // 数据加载图标
      dataTotals: 0, // 查询数据总条数
      payOrderInfoDataSource: {}, // 回显支付账单信息
      payinfoReconciliationDataSource: [], // 支付信息对账列表
      queryParma: {
        pageSize: 5,
        pageIndex: 1,
        zhbh: ''
      }
    }
  },
  watch: {
    payOrderInfo(newdata, prevdata) {
      this.queryParma.zhbh = newdata.householdCode // 设置需要展示数据的查询住户编号
      this.payOrderInfoDataSource = newdata // 回显信息数据
      this.getPayInfoListPageHandle()
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
      this.getPayInfoListPageHandle()
    },
    getPayInfoListPageHandle() {
      this.getPayInfoListPage()
    },
    async getPayInfoListPage() {
      this.loading = true
      const res = await getAllPayInfoPage(this.queryParma)
      const data = res.data.main.dataArray
      const resp = res.data.respOutMsgHeader
      const totals = res.data.main.totalsData
      const currentPage = res.data.main.currentPage
      if (resp.respCode === 200) {
        setTimeout(() => {
          this.searchloding = false
          this.loading = false
        }, 500)
        this.payinfoReconciliationDataSource = data
        this.dataTotals = totals
        this.queryParma.pageIndex = currentPage
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
        this.loading = false
      }
    },
    getpayStatusDictsValue(code) {
      return getDictsList(this.payinfoStatusList, code)
    },
    getpayTypeDictsValue(code) {
      return getDictsList(this.payTypeList, code)
    },
    indexMethod(index) {
      return index + 1 + (this.queryParma.pageIndex - 1) * this.queryParma.pageSize
    },
    handleSizeChange(val) {
      this.queryParma.pageSize = val
      this.getPayInfoListPageHandle()
    },
    handleCurrentChange(val) {
      this.queryParma.pageIndex = val
      this.getPayInfoListPageHandle()
    },
    handleCheck(index, row) {
      this.$confirm('确定对账？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(_ => {
        this.CheckAndSetReconciliationHandle(row)
      })
        .catch(_ => {
        })
    },
    CheckAndSetReconciliationHandle(row) {
      this.CheckAndSetReconciliation(row)
    },
    async CheckAndSetReconciliation(row) {
      const rowArray = []
      rowArray.push(row)
      const res = await modifyOneOrBatchPayInfo(rowArray, '1')
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: '对账成功' || 'success',
          type: 'success',
          duration: 2 * 1000
        })
        this.getPayInfoListPageHandle()
        this.reflushDataHandle() // 重新获取对账信息列表数据
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    }
  },
  reflushDataHandle() {
    // 调用父组件获取方法刷新数据
    this.$emit('reflushDataHandle')
  }
}
</script>

<style scoped>

</style>
